<template>
	<view class="foodpage">
	   <view class="userdate" v-if="user.memberLevel!=0">
	   	 <view class="iconfont icon-fuwu1">
	   	 	
	   	 </view>
		 用户{{user.memberName||'新用户'}}专病服务 第 
		 <view class="day">
		 	{{day||'0'}}
		 </view>
		 天 剩余
		  <view class="sheng">
		  	{{shengyu||'0'}}
		  </view>
		  天
	   </view>
		
<!-- 
		<view class="weekline">
			<view class="week">
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">
						<view class="picker">{{date}} <view class="iconfont icon-xiangxiabeifen"></view></view>
						
					</view>
				</picker>
			</view>
			
		</view>
		
		
<view class="back">
	<view class="datetab">
		<view class="itemdate " :class="tab=='day'?'act':''" @click="selecttab('day')">
			日
		</view>
		<view class="itemdate" :class="tab=='week'?'act':''" @click="selecttab('week')">
			周
		</view>
		<view class="itemdate" :class="tab=='month'?'act':''" @click="selecttab('month')">
			月
		</view>
	</view>
</view>

		<view class="chartbox">
			<view class="boxtitle">
				健康指数
			</view>
			<view class="topbox">
				<view class="chart1box" >
					<l-echart ref="chart1"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							75
						</view>
						<view class="label">
							6X综合
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							81
						</view>
						<view class="label">
							饮食
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							70
						</view>
						<view class="label">
							运动
						</view>
					</view>
				</view>
			</view>
			<view class="topbox">
				<view class="chart1box">
					<l-echart ref="chart2"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner" @click="goadddata(1)">
						<view class="name">
							150/113
						</view>
						<view class="label">
							血压
						</view>
					</view>
					<view class="itembanner" @click="goadddata(2)">
						<view class="name">
							79
						</view>
						<view class="label">
							体重
						</view>
					</view>
					
				</view>
			</view>
			<view class="topbox">
				<view class="chart1box">
					<l-echart ref="chart3"></l-echart>
				</view>
				<view class="rightbanner" @click="goadddata(2)">
					<view class="itembanner">
						<view class="name">
							7
						</view>
						<view class="label">
							空腹血糖
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						餐后2h
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						随机血糖
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						晚餐后2h
						</view>
					</view>
					
				</view>
			</view>
		</view> -->
		
		<view class="card" @click="goplan">
			<image src="https://changban.dianjingkeji.net/img/微信图片_20250930102816_884_133.jpg" mode=""></image>
		</view>
		
		<view class="waitbox">
			<view class="waittile">
				6X医生长伴服务进度
				<view class="line">
					
				</view>
			</view>
			
			
		</view>





<view class="foodbox">
	<view class="titleline">
		<view class="left">
			医嘱解读和执行指导
		</view>
		<view class="lable" @click="goyizhulist">
			查看所有
		</view>
	</view>
	<view class="list">
		<view class="itemfood" v-for="(item,index)  in yizhulist" :key="index"  @click="yizhudetail(item)">
			<image :src="'https://changban.dianjingkeji.net/prod-api'+item.yzImg[0]" mode=""></image>
			<view class="itemtype">
				{{item.yzStatus==0?'待确认':item.yzStatus==1?'待提交':item.yzStatus==2?'待审核':item.yzStatus==3?'生成中':'已生成'}}
			</view>
			<view class="itemname">
				{{item.yzTitle}}
			</view>
		</view>
		<view class="itemfood add" @click="addyizhu">
			<view class="iconfont icon-tianjia">
				
			</view>
		</view>
	</view>
</view>
<view class="foodbox">
	<view class="titleline">
		<view class="left">
			跟踪随访计划
		</view>
		
	</view>
	<view class="suifangbox">
	  <view class="itemsuifang">
	  	<view class="suifangname">
	  		当日随访任务
	  	</view>
		<view class="suifangline">
			共
			<view class="suifangnum">
				{{suifangnum||0}}
			</view>
			项
		</view>
		<view class="detail" @click="gojihua">
			详情>
		</view>
	  </view>
	  <view class="itemsuifang">
	  	<view class="suifangname">
	  		随访报到
	  	</view>
	  		<view class="suifangline">
	  			已报到
	  			<view class="suifangnum" style="color: green;">
	  				{{baodaoday||0}}
	  			</view>
	  		  天
	  		</view>
			<view class="baodaotime" v-if="selectedTime">
				报到时间：{{selectedTime}}-{{endtime}}
			</view>
	  		<view class="detail baodao " v-if="isbaodao==0" @click="qubaodao">
	  		   报到
	  		</view>
			<view class="detail baodao " v-if="isbaodao==1">
			已报到
			</view>
	  </view>
	  
	
	</view>
</view>

<view class="foodbox">
	<view class="titleline">
		<view class="left">
			事件提醒（用户自我管理记录）
		</view>
		<!-- <view class="lable" @click="goevenlist">
			查看所有
		</view> -->
	</view>
	<view class="list">
		<view class="itemfood" @click="evenlist(item)" v-for="(item,index) in shijianlist" :key="index" >
			<image src="https://changban.dianjingkeji.net/img/治疗.png" mode=""></image>
			<view class="itemname">
				{{item.dictLabel}}
			</view>
		</view>
		<view class="itemfood add" @click="addeven">
			<view class="iconfont icon-tianjia">
				
			</view>
		</view>
	</view>
</view>
<view class="foodbox">
	<view class="titleline">
		<view class="left">
			关键行动（医护团队下发）
		</view>
	
	</view>
	<view class="list">
		<view class="itemfood" v-for="(item,index) in guanjianlist" :key="index" @click="goguanjianxingdong(item)">
			<image src="https://changban.dianjingkeji.net/img/治疗.png" mode=""></image>
			<view class="itemname">
				{{item.dictLabel}}
			</view>
		</view>
	
	</view>
</view>

    <view class="winpage" v-if="winshow ">
    	<view class="iconfont icon-guanbi" @click="winshow=false">
    		
    	</view>
		<view class="win">
			<view class="wintop">
				<view class="iconfont icon-yisheng-02">
					
				</view>
				<view class="wintitle">
					请依从随访，你的懒惰是慢病逆转最大的敌人
				</view>
			</view>
			<view class="pickerbox">
				<view class="pickertitle">
					报道开始时间
				</view>
				<picker mode="selector" :range="timelist" @change="bindTimeChange">
				      <view class="picker">
				        {{ selectedTime }}{{selectedTime?'--':''}}{{endtime}}
				      </view>
				    </picker>
					<view class="timeline">
						您选择的时间段为 {{ selectedTime }}-{{endtime}}(1小时)
					</view>
					<view class="tishiline">
						<view class="iconfont icon-tixing-tianchong">
							
						</view>
						重要提示
					</view>
					<view class="content">
					  报道时间是指您的一户团队将在1小时内给您推送随访信息，或与您沟通随访相关事项，请合理选择报道开始时间。
					</view>
					<view class="winbtn" @click="suifangbaodao">
						确定
					</view>
			</view>
		</view>
    </view>
	
	
	</view>
</template>

<script>

	 import {medicalOrders,getDictData,getInfo,followUpReport,getFollowUpPlanCount,getTeamLeader} from '../../utils/api.js'
	export default {
		data() {
			
			return {
			tab:'day',
			user:'',
			
			suifanglist:[],
			guanjianlist:[],
			shijianlist:[],
			yizhulist:[],
			chartpro:{},
			timelist:[],
			selectedTime:'',
			endtime:'',
			winshow:false,
			user:{},
			day:'',
			shengyu:'',
			suifangnum:'',
			baodaoday:'',
			isbaodao:'',
			lingxian:''
			
			}
		},
		watch: {
		    // 监听 selectedTime 变化
		    selectedTime(newVal) {
		      // 清空时
		      if (!newVal) {
		        this.endtime = '';
		        return;
		      }
		
		      // 校验是否为“整点”格式：HH:00（00~23）
		      const hourMatch = newVal.match(/^([0-1][0-9]|2[0-3]):00$/);
		      if (hourMatch) {
		        const hour = parseInt(hourMatch[1], 10);
		        const nextHour = (hour + 1) % 24; // 自动跨天，23:00 → 00:00
		        this.endtime = `${String(nextHour).padStart(2, '0')}:00`;
		      } else {
		        // 不符合整点格式，清空 endtime
		        this.endtime = '';
		      }
		    }
		  },
	
		onShow() {
			let a ={
				phone:uni.getStorageSync('phone')
				
			}
			getInfo(a).then(res=>{
				console.log(res)
				this.day=res.data.data.cpServiceCurrentDays
				this.shengyu=res.data.data.cpServiceRemainingDays
				this.user=res.data.data.info
				uni.setStorageSync('user',res.data.data.info)
				if(res.data.data.info.memberLevel==3){
					medicalOrders(a).then(res=>{
						const newData = res.data.data.map(item => ({
						  ...item,
						  yzImg: item.yzImg ? item.yzImg.split(',') : []
						}));
						console.log(newData,'这是处理过的数据')
						this.yizhulist=newData
					})
				}
				getFollowUpPlanCount(a).then(res=>{
					console.log(res)
					this.suifangnum=res.data.data.task_count
					this.baodaoday=res.data.data.report_count
					this.isbaodao=res.data.data.report_status
					if(res.data.data.report_time){
						this.selectedTime=res.data.data.report_time.slice(0, -3)
					}
				})
				getTeamLeader(a).then(res=>{
					console.log(res,'0000')
					if(res.data.code==200){
						this.lingxian=res.data.data.status
					}
				})
						
			})
			
		
	
	
	
			let b={
				type:'sys_shijiantixingbiaoqian'
			}
			getDictData(b).then(res=>{
				
				this.shijianlist=res.data.data
			})
			let c={
				type:'sys_guanjianxingdongbiaoqian'
			}
			getDictData(c).then(res=>{
				
				this.guanjianlist=res.data.data
			})
		
			
			this.timelist = Array.from({ length: 24 }, (_, i) => 
			  i.toString().padStart(2, '0') + ':00'
			);
			
		
			
		},
		methods: {
			
			qubaodao(){
				if(this.user.memberLevel!=3){
					uni.showToast({
						title: '请联系您的主管医生或主管护士开通服务',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.isbaodao==1){
					uni.showToast({
						title: '今日已报到',
						icon:'none',
						duration: 2000
					});
					
				}else{
					this.winshow=true
				}
			},
			suifangbaodao(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定报到吗？',
					success: function (res) {
						if (res.confirm) {
							
							let p={
								phone:uni.getStorageSync('phone'),
								daytime:that.selectedTime+':00',
								hours:'1'
							}
							followUpReport(p).then(res=>{
								console.log(res,'随访报到')
								if(res.data.code==200){
									uni.showToast({
										title: '报到成功',
										icon:'none',
										duration: 2000
									});
									that.winshow=false
									let a ={
										phone:uni.getStorageSync('phone')
										
									}
									getFollowUpPlanCount(a).then(res=>{
										console.log(res)
										that.suifangnum=res.data.data.task_count
										that.baodaoday=res.data.data.report_count
										that.isbaodao=res.data.data.report_status
										if(res.data.data.report_time){
											that.selectedTime=res.data.data.report_time.slice(0, -3)
										}
									})
									
									
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			
			bindTimeChange(e){
				
				this.selectedTime=this.timelist[e.detail.value]
			},
			//点击事件的查看更多
			goevenlist(){
			
			},
			goguanjianxingdong(e){
				if(this.user.memberLevel!=3){
					uni.showToast({
						title: '请联系您的主管医生或主管护士开通服务',
						icon:'none',
						duration: 2000
					});
					return
				}
				let label=e.dictValue
				uni.navigateTo({
					url:'/pagesB/guanjianxingdong/guanjianxingdong?label='+label
				})
				
			
			},
			//点击事件类型 查看同类型事件
			evenlist(e){
				
				let label=e.dictValue
				
				uni.navigateTo({
					url:'/pagesB/remind/remind?label='+label
					
				})
			},
			goyizhulist(){
				if(this.user.memberLevel==3){
					uni.navigateTo({
						url:'/pagesB/yizhulist/yizhulist'
					})
				}
			},
			goplan(){
				if(this.user.memberLevel!=3){
					uni.showToast({
						title: '请联系您的主管医生或主管护士开通服务',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.yizhulist.lenght==0){
					uni.showToast({
						title: '请先上传医嘱',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.user.serviceId){
					let sid=this.user.serviceId
					uni.navigateTo({
						url:'/pagesB/plan/plan?sid='+sid
					})
				}else{
					uni.showToast({
						title: '随访计划生成中...',
						icon:'none',
						duration: 2000
					});
					   return
				}
				
			},

			
			lookgengduo(){
				uni.navigateTo({
					url:'/pagesB/plan/plan'
				})
			},
			gojihua(){
				if(this.user.memberLevel!=3){
					uni.showToast({
						title: '请联系您的主管医生或主管护士开通服务',
						icon:'none',
						duration: 2000
					});
					return
				}
				uni.navigateTo({
					url:'/pagesB/jihua/jihua'
				})
			},

		
	
			addeven(){
				if(this.user.memberLevel==3){
				uni.navigateTo({
					url:'/pagesB/addeven/addeven'
				})
				}
			},
			suifang(){
				if(this.user.memberLevel==3){
				uni.navigateTo({
					url:'/pagesB/suifangplan/suifangplan'
				})
				}
			},
			addyizhu(){
				console.log(this.lingxian)
				if(this.lingxian==0){
					uni.navigateTo({
						url:'/pagesB/upyizhu/upyizhu'
					})
				}else{
					uni.showToast({
						title: '您当前所在团队缺少领衔专家，请联系团队创建人',
						icon:'none',
						duration: 2000
					});
				}
				
				
			},
			
			yizhudetail(e){
			if(this.user.memberLevel!=3){
				uni.showToast({
					title: '请联系您的主管医生或主管护士开通服务',
					icon:'none',
					duration: 2000
				});
				return
			}
				if(e.yzStatus<3){
					uni.showToast({
						title: '等待专家审定...',
						icon:'none',
						duration: 2000
					});
			           return
				}
				let id=e.id
				uni.navigateTo({
					url:'/pagesB/yizhudetail/yizhudetail?id='+id
				})
				
			},
			
			
		
					
			
			
	
			
			

		
								
			
		}
	}
</script>

<style lang="less" scoped>
.foodpage{
	width: 750rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	padding-bottom: 200rpx;
	.userdate{
		width: 100%;
		background-color: #FFFCF6 ;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		color: gray;
		padding: 12rpx 0;
		.day{
			font-size: 30rpx;
			color: black;
			
		}
		.sheng{
			font-size: 30rpx;
			color: #FF4D00 ;
		}
	}
	.card{
		width: 96%;
		height: 300rpx;
		margin: 30rpx auto;
		text-align: center;
		line-height: 300rpx;
		border-radius: 30rpx;
		color: white;
		font-weight: bold;
		font-size: 44rpx;
		background-color: #1A4F8A;
		box-shadow: 0 0 10rpx raba(0,0,0,0.5);
		image{
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
		
	}

	.weekline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: white;
		.week{
			margin: 0 30rpx;
			font-weight: bold;
			color: #1A4F8A;
			font-size: 32rpx;
			font-family: OPPOSans-black;
			display: flex;
			align-items: center;
			.picker{
				display: flex;
				align-items: center;
				position: relative;
			}
			.iconfont{
				color:#5c6fac;
				
			}
		}
		
	}
	.back{
		width: 100%;
		height: 120rpx;
		background-color: white;
		.datetab{
			width: 90%;
			height: 110rpx;
			display: flex;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 20rpx;
			margin: auto;
			background-color: #F4F4F4 ;
			color:#656565  ;
			line-height: 90rpx;
			.itemdate{
				width:33%;
				height: 100%;
				text-align: center;
				border-radius: 20rpx;
			}
			.act{
				background-color: white;
				font-weight: bold;
				color: #494949 ;
			}
			
		}
	}
		.chartbox{
			width: 100%;
			box-sizing: border-box;
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx 20rpx 40rpx 30rpx;
			.boxtitle{
				font-size: 30rpx;
				font-weight: bold;
				border-left: 8rpx solid #1A4F8A;
				height: 30rpx;
				padding-left: 30rpx;
				line-height: 30rpx;
			}
			.topbox{
				width: 100%;
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 10rpx;
				margin-top: 30rpx;
				.chart1box{
					width: 600rpx;
					height: 400rpx;
					
					
				}
				.rightbanner{
					.itembanner{
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						background-color: #1A4F8A;
						color: white;
						text-align: center;
						box-sizing: border-box;
						padding-top: 20rpx;
						margin-top: 10rpx;
						.name{
							font-weight: bold;
							font-size: 34rpx;
						}
						.label{
							font-size: 26rpx;
							color: rgba(255,255,255,0.7);
							
						}
					}
					
				}
			}
		}
		
		
		.waitbox{
			width: 100%;
			
			background-color: white;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 20rpx;
			.waittile{
				font-weight: bold;
				position: relative;
				.line{
					position: absolute;
					width: 66rpx;
					height: 8rpx;
					background-color: #1A4F8A;
					border-radius: 4rpx;
				bottom: 0;
				left: 0;
				}
			}
			.waitlabel{
				display: flex;
				align-items: center;
				line-height: 2.2;
				.num{
					color: #1A4F8A;
					font-weight: bold;
				}
			}
	     
		}
	
	



	.foodbox{
		width: 100%;
		background-color: white;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.titleline{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 30rpx;
			line-height: 30rpx;
			.left{
				border-left: 6rpx solid #1A4F8A;
			    font-size: 30rpx;
					font-weight: bold;
					padding-left: 14rpx;
					color: #575757;
			}
			.lable{
				font-size: 26rpx;
				color: gray;
				font-weight: bold;
			}
		}
		.suifangbox{
					  width: 100%;
					  display: flex;
					  align-items: center;
					  justify-content: space-evenly;
					  .itemsuifang{
						  width: 48%;
						  margin: 1%;
						  border-radius: 20rpx;
						  box-sizing: border-box;
						  padding: 20rpx;
						  background: whitesmoke;
						  position: relative;
						  .suifangname{
							  font-size: 34rpx;
							  font-weight: bold;
						  }
						  .suifangline{
							  display: flex;
							  align-items: center;
							  font-size: 28rpx;
							  line-height: 2;
							  .suifangnum{
								  font-weight: bold;
								  font-size: 32rpx;
								  margin: 0 10rpx;
								  color: #1A4F8A;
							  }
							
						  }
						  .baodaotime{
							  font-size: 26rpx;
						  }
						  .baodao{
						  	
							position: absolute;
							background-color: white;
							padding: 4rpx 10rpx;
							border-radius: 6rpx;
							right: 4rpx;
							top: 8rpx;
						  }
						  .detail{
							  text-align: right;
							  color: #1A4F8A;
							   font-size: 30rpx;
						  }
						  
					  }
		}
		.list{
			width: 100%;
			overflow-x: auto;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			.add{
				background-color:#e0e0e0  !important;
				text-align: center;
				.iconfont{
					font-size: 50rpx;
					line-height:180rpx;
					margin: auto;
				}
				
			}
			
			.itemfood{
				width: 250rpx;
				min-width: 250rpx;
				height: 180rpx;
				border-radius: 30rpx;
				position: relative;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
				.itemtype{
					width: 50%;
					height: 42rpx;
					position: absolute;
					top: 0;
					right: 0;
				
					color: green;
					font-weight: bold;
					border-top-right-radius: 30rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 24rpx;
				}
				.itemname{
					width: 100%;
					height: 42rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					border-bottom-left-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 24rpx;
					
				}
			}
		}
	}
	.winpage{
		width: 750rpx;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		border: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		.icon-guanbi{
			position: absolute;
			right: 40rpx;
			top: 14vh;
			color: white;
		}
		.win{
			width: 74%;
			height: 65vh;
			position: absolute;
			left: 13%;
			top: 12vh;
			background-color: white;
			border-radius: 24rpx;
			.wintop{
				width: 100%;
				height: 200rpx;
				box-sizing: border-box;
				padding: 20rpx;
				
				display: flex;
				align-items: center;
				border-top-right-radius: 24rpx;
				border-top-left-radius: 24rpx;
				font-weight: 800;
				line-height: 2;
				background: linear-gradient(180deg, rgba(214,241,253,1) 0%,rgba(162,225,254,1) 100%);
				.iconfont{
					font-size: 100rpx;
					font-weight: 300;
					color: #0075FF ;
					margin-right: 20rpx;
				}
			}
			.pickerbox{
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx;
				.pickertitle{
					text-align: center;
                     font-size: 30rpx;
					 font-weight: bold;
                   margin: 30rpx 0;
				}
				.picker{
					width: 300rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 8rpx;
					box-sizing: border-box;
					padding-left: 10rpx;
					margin: auto;
					background-color: #eeeeee;
					color: gray;
				}
				.timeline{
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					margin-top: 30rpx;
					color: #1A4F8A;
				}
				.tishiline{
					display: flex;
					align-items: center;
				
					width: 80%;
					margin: auto;
						margin-top: 40rpx;
					color: gray;
					font-size: 30rpx;
					.iconfont{
						color: red;
						font-size: 40rpx;
						
					}
				}
				.content{
					width: 80%;
					margin: auto;
					margin-top: 10rpx;
					color: gray;
					font-size: 28rpx;
				}
				.winbtn{
					width: 80%;
					height: 70rpx;
					line-height: 70rpx;
					color: white;
					text-align: center;
					font-size: 30rpx;
					border-radius: 35rpx;
					background: #1A4F8A;
					margin: 40rpx auto;
				}
				
			}
			
			
		}
	}
	
	
}
</style>
